<template>
	<!--赛事详情页-->
	<view class="page-content">
		<image class="page-top" :src="onload_img"></image>
		<view class="page-body">
			<view class="con-cksg" v-if="signsta==='5'" @click="tomatched">
				<view class="con-title">查看赛果</view>
				<view class="icons icon-gengduo"></view>
			</view>
			<view class="body-box">
				<view class="con-tit">
					<view class="con-title">{{datalist.title}}</view>
					<view class="con-sta"
						:style="{color:signsta==='1'?'#02BB6F':signsta==='4'?'#333333':signsta==='2'?'#02BB6F':signsta==='3'?'#333333':signsta==='5'?'#FE5050':''}">
						{{signsta==='1'?'报名中':signsta==='4'?'报名结束':signsta==='2'?'报名中':signsta==='3'?'报名结束':signsta==='5'?'已结束比赛':''}}
					</view>
				</view>
				<view class="con-txt"><text class="iconsj icons icon-shijianjiangxu"></text>报名时间：{{datalist.signtime}}
				</view>
				<view class="con-txt"><text
						class="iconsj icons icon-shijianjiangxu"></text>开赛时间：{{datalist.game_start_time}}</view>
				<view class="con-txt">主办方：{{datalist.sponsor}}</view>
				<view class="con-txt">检录地点：{{datalist.sign_site}}</view>
			</view>
			<view class="body-box">
				<block v-for="(item,index) in datalist.group_data" :key="index">
					<view class="con-li">
						<view class="con-li-l">
							<view class="con-li-l-txt">{{item.title}}({{item.number}}人)</view>
							<view class="con-li-line"></view>
						</view>
						<view class="con-li-r"><text class="con-li-m">¥{{item.money}}</text>/队</view>
					</view>
				</block>
			</view>
			<view class="body-box"
				:style="{'margin-bottom':(signsta==='1' || signsta==='2'|| signsta==='3'|| signsta==='4')?'120rpx':signsta==='5'?'20rpx':'20rpx'}">
				<view class="con-title">赛事介绍</view>
				<rich-text class="con-text" :nodes='datalist.remarks' decode='true'></rich-text>
				<!-- <view class="con-text" :v-html='datalist.remark' decode='true'></view> -->
			</view>
		</view>
		<view class="page-foot" @click="todetail" v-if="signsta==='1'|| signsta==='2'"
			:style="{color:(signsta==='1' || signsta==='2')?'#fff':'#999',background:(signsta==='1' || signsta==='2')?'#02BB6F':'#ddd'}">
			立即报名</view>
		<view class="page-foot" v-else-if="signsta==='3' || signsta==='4'"
			:style="{color:(signsta==='1' || signsta==='2')?'#fff':'#999',background:(signsta==='1' || signsta==='2')?'#02BB6F':'#ddd'}">
			报名结束</view>
		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog :type="msgType" title="报名需要您授权登录!" content="" :before-close="false" @confirm="dialogConfirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniSection from "@/components/uni-section/uni-section.vue"
	import {
		getgameinfos, //赛事详情
		getgamegroups //获取赛事组别
	} from '@/common/api.js'
	export default {
		components: {
			uniSection,uniPopupDialog
		},
		data() {
			return {
				tp_id: '',
				onload_img: '',
				signsta: '2',
				datalist: {
					/* 
										img: '',
										title: '2021春季城市穿越赛',
										signtime: '2021/04/01-2021/04/09',
										statime: '2021/04/15 08:00-16:00',
										sponsor: '厦门市湖里区区政府',
										address: '福建省厦门市五缘湾公园',
										contxt: ''
									 */
				},
				type:'',
				item:'',
			}
		},
		onLoad(option) {
			console.log(222, option)
			this.type = option.type
			if (option.type == 1) {
				this.signsta = '2'
				let item = JSON.parse(option.data)
				this.item =item
				// this.datalist = item;
				// this.datalist.signtime = item.sign_start_time + ' —— ' + item.sign_end_time
			}
			if (option.type == 2) {
				this.signsta = '1'
				if (option.data) {
					let item = JSON.parse(option.data)
					this.item =item
					this.tp_id = item.id;
					//this.onload_img = item.img;
					// this.datalist = item;
					// this.datalist.signtime = item.sign_start_time + ' —— ' + item.sign_end_time
				}
			}
			if (option.type == 3) {
				this.signsta = '3'
				let item = JSON.parse(option.data)
				this.item =item
				this.tp_id = item.id;
			}
			if (option.type == 4) {
				this.signsta = '4'
				let item = JSON.parse(option.data)
				this.item =item
				this.tp_id = item.id;
			}
			if (option.type == 5) {
				this.signsta = '5'
				let item = JSON.parse(option.data)
				this.item =item
				this.tp_id = item.id;
			}
			this.getdata();
		},
		methods: {
			getdata() {
				getgameinfos({
					id: this.tp_id
				}).then(res => {
					this.datalist = res.data;
					this.onload_img = res.data.game_img[0];
					this.datalist.signtime = res.data.sign_start_time.replace(/-/g,'/') + ' - ' + res.data.sign_end_time.replace(/-/g,'/');
					this.datalist.game_start_time = res.data.game_start_time.replace(/-/g,'/');
					this.datalist.remarks = this.formatRichText(res.data.remark)
				})
			},
			formatRichText(html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
					return newContent;
			},
			todetail() {
				let super_token = uni.getStorageSync('super_token');
				if (super_token === "") {
					this.$refs.popupDialog.open()
				}else{
					uni.navigateTo({
						url: `/pages/signUp/sign_list?id=${this.tp_id}`
					})
				}
			},
			tomatched() {
				uni.navigateTo({
					url: `/pages/index/match_detail?id=${this.tp_id}`
				})

			},
			dialogConfirm() {
				// #ifdef MP
				uni.reLaunch({
					url: '/packageA/public/tologin?from=index&type=' + this.type + '&data=' + JSON.stringify(this.item)
				})
				// #endif
				this.$refs.popupDialog.close()
			}
		}
	}
</script>

<style lang="scss">
	.page-content {
		display: flex;
		flex-direction: column;

	}

	.page-top {
		width: 100%;
		height: 380rpx;
	}

	.page-foot {
		position: fixed;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: boldl;
		height: 100rpx;
		width: 100%;
		bottom: 0;
	}

	.page-body {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		.con-cksg {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			background-color: #FE5050;
			color: #FFFFFF;

			.con-title {
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.body-box {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 32rpx 30rpx;
			line-height: 60rpx;
			width: 100%;

			.con-tit {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.con-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					width: calc(100% - 160rpx);
				}

				.con-sta {
					font-size: 28rpx;
					font-weight: 500;
					width: 160rpx;
					text-align: right;
				}
			}

			.con-txt {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;

				.iconsj {
					margin-right: 15rpx;
				}
			}

			.con-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;

				.con-li-l {
					flex: 1;
					display: flex;
					align-items: center;

					.con-li-l-txt {
						width: 250rpx;
					}

					.con-li-line {
						flex: 1;
						height: 1rpx;
						margin-right: 30rpx;
						background-color: #eee;
					}
				}

				.con-li-r {
					font-weight: bold;
					color: #333;

					.con-li-m {
						color: #FE5050;
					}
				}
			}

			.con-text {
				width: 100%;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 40rpx;
				image{
					width: 100%!important;
					max-width: 100%!important;
				}
			}
		}
	}
</style>
